<script setup lang="tsx">
import { computed, reactive, ref } from 'vue';
import { iconList } from '@/views/system/menu/modules/iconList';

interface Props {
  menuList: Api.Auth.Menu[];
}

defineProps<Props>();

const formRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    pid: null,
    title: '',
    path: '',
    name: '',
    component: '',
    localIcon: '',
    order: null,
    isHide: 0,
    isLink: '',
    isKeepAlive: 0,
    isAffix: 0,
    isIframe: 0
  },
  rules: {
    title: [
      { required: true, message: '请输入菜单名称', trigger: 'blur' }
    ],
    path: [
      { required: true, message: '请输入菜单路径', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请输入组件名称', trigger: 'blur' }
    ],
    component: [
      { required: true, message: '请输入组件地址', trigger: 'blur' }
    ]
  }
});
const iconDataList = computed(() => {
  const data = [];
  iconList.map(item => {
    data.push({
      label: item,
      value: item
    });
  });
  return data;
});
const renderIconLabel = option => {
  return <SvgIcon local-icon={option.value}></SvgIcon>;
};
defineExpose({
  state,
  formRef
});
</script>

<template>
  <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
    <n-grid responsive="screen" item-responsive>
      <n-form-item-gi span="24" label="上级菜单" path="pid">
        <n-tree-select v-model:value="state.ruleForm.pid" :options="menuList"
                       placeholder="请选择上级菜单" label-field="title" key-field="id" clearable></n-tree-select>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="菜单名称" path="title">
        <n-input v-model:value="state.ruleForm.title" placeholder="请输入菜单名称"></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="菜单路径" path="path">
        <n-input v-model:value="state.ruleForm.path" placeholder="请输入菜单路径"></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="组件名称" path="name">
        <n-input v-model:value="state.ruleForm.name" placeholder="请输入组件名称"></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="组件地址" path="component">
        <n-input v-model:value="state.ruleForm.component" placeholder="请输入组件地址"></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="图标" path="localIcon">
        <n-select v-model:value="state.ruleForm.localIcon" :options="iconDataList" placeholder="请选择菜单图标" :render-label="renderIconLabel"></n-select>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="排序" path="order">
        <n-input-number class="w-100%" v-model:value="state.ruleForm.order" placeholder="请输入排序"></n-input-number>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="是否隐藏" path="isHide">
        <n-radio-group v-model:value="state.ruleForm.isHide">
          <n-radio :value="0">显示</n-radio>
          <n-radio :value="1">隐藏</n-radio>
        </n-radio-group>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<style scoped>

</style>
